import {View, Text, ScrollView, Image} from "@tarojs/components";
import React, {useCallback, useEffect, useRef, useState} from "react";
import {RelationModel} from "@/common/apis/model";
import {relationDeleteApi, teamRelationListApi} from "@/common/apis/home_datasource";
import LogUtils from "@/utils/log";
import Utils from "@/utils/common";
import {Cell, Empty, Button, CellGroup} from "@antmjs/vantui";
import AssetImage from "@/common/AssetImage";

import RouthPath from "@/common/RouthPath";

definePageConfig({
  navigationBarTitleText: '课题组成员列表'
})

export default function ResearchTeamMember() {
  const [items, setItems] = useState<RelationModel[]>()

  const isCreator = useRef<boolean>();
  const relationModel = useRef<RelationModel>();
  const getList = useCallback(() => {
    teamRelationListApi(relationModel.current.teamId).then((res) => {
      setItems(res)
    })
  }, []);

  useEffect(() => {
    const params = Utils.getParamsByRouter(Utils.getI())
    if (params && params.data) {
      const dt = Utils.getObjectWithUrl<RelationModel>(params.data);
      if (dt) {
        isCreator.current = dt.isCreator === 1
        relationModel.current = dt
        getList()
      }
    }
    return () => {
      LogUtils.info("FaPiaoList", "FaPiaoList")
    }
  }, []);
  return (
    <View style={{backgroundColor: AssetImage.bg, display: 'flex', flexDirection: 'column', height: '100VH'}}>
      <ScrollView scrollY style={{boxSizing: 'border-box', flex: '1', position: 'relative', overflow: 'hidden'}}>
        {
          items ? <View>
            <CellGroup title={<View
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                width: '100%',
              }}
            ><Text>课题组成员</Text> <View
              style={{display: 'flex', alignItems: 'center', flexDirection: 'row'}}
            >{
              isCreator.current ? <Button plain hairline type='info'
                size='small'
                onClick={() => {
                                            if (relationModel.current) {


                                              Utils.navigateAndListenToEvent(Utils.getUrlWithObject(RouthPath.searchUser, {id: relationModel.current.teamId}), 'addMember', (data) => {
                                                if (data) {
                                                  getList();
                                                }
                                              })

                                            }
                                          }}
              >添加成员</Button> : null
            }
            </View></View>}
            >
              {
                Utils.isEmpty(items) ? <Empty description='暂无成员'></Empty> :
                  items.map((item, index) => {
                    return (
                      <Cell renderIcon={<Image src={item.avatar}
                        style={{
                                                 width: '30px',
                                                 height: '30px',
                                                 borderRadius: '50%',
                                                 marginRight: '10px'
                                               }}
                      />}
                        title={item.username} key={index}
                      >

                        {
                          isCreator.current && item.isCreator !== 1 ? <View>
                            <Button
                              style={{color: 'red'}}
                              size='small'
                              onClick={() => {
                                if (relationModel.current) {
                                  Utils.modal('删除成员', `确定要删除成员`, true, (ok) => {
                                    if(ok){
                                      relationDeleteApi(relationModel.current.teamId, item.id).then((res) => {
                                        if (res) {
                                          getList()
                                        }
                                      })
                                    }
                                  })
                                }
                              }}
                            >删除</Button>
                            <Button
                              style={{color: AssetImage.themeColor}}
                              size='small'
                              onClick={() => {
                                if (relationModel.current) {

                                  Utils.navigateAndListenToEvent(Utils.getUrlWithObject(RouthPath.setMemberPermission, item), 'update', (data) => {
                                    if (data) {
                                      getList();
                                    }
                                  })
                                }
                              }}
                            >设置权限</Button>
                          </View> : null
                        }

                      </Cell>
                    )
                  })
              }
            </CellGroup>
          </View> : <Empty description='暂无数据' />
        }
      </ScrollView>
    </View>

  )
}


